<template>
  <div>
    <div class="flex items-center cursor-pointer" @click="handleGo">
      <el-icon>
        <ArrowLeftBold />
      </el-icon>
      <span class="pl-5">{{ $t("创建卡片") }}</span>
    </div>
    <div class="mt-6 cardStats" v-if="isSelectCardType" v-loading="loading">
      <h3 class="text-lg">{{ $t("商务卡") }}</h3>
      <el-card class="mt-5 w-[60%]" shadow="always">
        <template v-if="state.cardType.length == 0">
          <el-empty description="暂无数据" :image-size="100"></el-empty>
        </template>
        <template v-else v-for="item of state.cardType" :key="item.category_id">
          <el-card
            :class="
              cardInfo.category_id == item.category_id ? 'selectedType' : ''
            "
            shadow="never"
            class="mb-4 cardTypeCard"
            @click="handleClick(item)"
          >
            <div class="flex items-center justify-between cursor-pointer">
              <span>{{ item.category_name }}</span>
              <el-icon
                class="selectIcon"
                v-if="cardInfo.category_id == item.category_id"
              >
                <CircleCheckFilled
              /></el-icon>
            </div>
          </el-card>
          <div
            v-if="cardInfo.category_id == item.category_id && item.description"
            v-html="item.description.replace(/\n/g, '<br>')"
            class="mb-4 pl-1 text-[#aaa] text-sm"
          ></div>
        </template>
      </el-card>
      <div
        class="mt-5 w-[60%] flex justify-center items-center"
        v-if="state.cardType.length > 0"
      >
        <el-button
          class="w-[200px] plainButton"
          type="primary"
          @click="handleNext"
          :plain="true"
          >{{ $t("下一步") }}</el-button
        >
      </div>
    </div>
    <div class="mt-6 cardStats" v-else v-loading="loading">
      <AddCardOld
        :cardTypeInfo="cardTypeInfo"
        :balanceInfo="state.balanceInfo"
        :coinsInfo="state.coinsInfo"
        v-if="isShowOld"
      />
      <AddCardNew
        :cardTypeInfo="cardTypeInfo"
        :balanceInfo="state.balanceInfo"
        :coinsInfo="state.coinsInfo"
        v-else
      />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed, watch } from "vue";
import { useRouter } from "vue-router";
import AddCardOld from "./addCardOld.vue";
import AddCardNew from "./addCardNew.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { GetCardsConfig, GetCardsBalance } from "@/api/card";
import { ElMessage } from "element-plus";
const router = useRouter();

const isSelectCardType = ref(true);

const handleGo = () => {
  if (state.cardType.length == 1) {
    router.replace(`/card/management`);
  } else {
    if (!isSelectCardType.value) {
      isSelectCardType.value = true;
    } else {
      router.replace(`/card/management`);
    }
  }
};
const loading = ref(false);

const state = reactive({
  cardType: [],
});

const cardInfo = reactive({
  category_id: "",
});

const lsLocale = localStorage.getItem("locale") || "";
const currentLanguage = ref("");
if (lsLocale) {
  currentLanguage.value = JSON.parse(lsLocale)?.locale;
}
import { useLocaleStore } from "@/store/modules/locales";

const useLocale = useLocaleStore();

watch(
  () => useLocale.locale,
  (val) => {
    getCardsConfig();
  }
);

const cardTypeInfo = ref({});

const handleClick = (item) => {
  cardTypeInfo.value = { ...item };
  cardInfo.category_id = item.category_id;
  // cardInfo.asset_type = item.asset_type;
  // state.card_rate = item.card_rate;
};

const isShowOld = ref(true);

// 下一步
const handleNext = async () => {
  if (!cardInfo.category_id) {
    ElMessage.error(t("请选择卡类型"));
    return;
  }
  if (cardTypeInfo.value.open_card_type == "custom") {
    isShowOld.value = false;
  } else {
    isShowOld.value = true;
  }
  isSelectCardType.value = false;
};
// 获取卡片基础信息
const getCardsConfig = async () => {
  loading.value = true;
  const { start_category } = await GetCardsConfig(); //卡片配置
  const { balance, coins } = await GetCardsBalance(); // 资产
  state.cardType = start_category; // 卡片类型
  cardTypeInfo.value = start_category[0];
  cardInfo.category_id = start_category[0]?.category_id; // 卡类型默认选择第一项
  if (state.cardType.length == 1) {
    handleNext();
  }
  cardInfo.asset_type = start_category[0]?.asset_type; // 卡类型默认选择第一项
  state.card_rate = start_category[0]?.card_rate; // 默认第一项的汇率
  state.balanceInfo = balance; // 余额list
  state.coinsInfo = coins; // 虚拟list
  loading.value = false;
};

onMounted(async () => {
  await getCardsConfig();
});
</script>
<style lang="scss" scoped>
.detailRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;

  .rowName {
    min-width: 30%;
    flex-shrink: 0;
    display: inline-block;
  }
  .selectName {
    min-width: 10%;
    text-align: center;
    flex-shrink: 0;
    display: inline-block;
  }

  .rowValue {
    display: inline-block;
    word-break: break-all;
    text-align: right;
  }
}
.hoverStyle:hover {
  background-color: #f4e1e1;
  border-radius: 5px;
}
.active {
  background-color: #ebc9c9;
  border-radius: 5px;
}
.btn {
  text-align: center;
  line-height: 40px;
  background: #e54c5f;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}
.selectIcon {
  color: #e54c5f;
  font-size: 24px;
}

.selectedType {
  border: 1px solid #e54c5f;
  border-radius: 5px;
}
</style>
